<template>
	<view class="box" style="display: flex; justify-content: center; align-items: center;">
		<view class="shell" style="display: flex; flex-direction: column; justify-content: center; align-items: center;
		height: 50%;width: 80%; border-radius: 25rpx; background-image: linear-gradient(to bottom right, rgb(118, 76, 163), rgb(92, 103, 211));" >
			<view class="account "
				style="display: flex; justify-content: space-around; align-items: center; margin:20rpx 0 ;">
				<img src="/static/account.png" alt="" style="height: 50rpx; width: 50rpx;" />
				<u--input v-model="account" placeholder="请输入账号" border="surround" color="white"></u--input>
			</view>
			<view class="password"
				style="display: flex; justify-content: space-around; align-items: center; margin:20rpx 0 ;">
				<img src="/static/password.png" alt="" style="height: 50rpx; width: 50rpx;" />
				<u--input v-model="password" placeholder="请输入密码" border="surround" color="white" password></u--input>
			</view>
			<view class="repassword"
				style="display: flex; justify-content: space-around; align-items: center; margin:20rpx 0 ;">
				<img src="/static/password.png" alt="" style="height: 50rpx; width: 50rpx;" />
				<u--input placeholder="再次确认密码" border="surround" color="white" password @blur="judgePassword"></u--input>
			</view>
			<view class="modal" v-if="modal_status">
				<text style="color: red; font-size: 26rpx;">密码不一致</text>
			</view>
			<view class="login py-3" style="padding-left: 300rpx;">
				<u-button @click="gologin" type="primary" size="small" text="注册" style="background-image: linear-gradient(to bottom right, rgb(118, 76, 163), rgb(92, 103, 211));"></u-button>
			</view>
		</view>

	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		data() {
			return {
				account:null,
                password:null,
				modal_status:false
			};
		},
		methods:{
			gologin()
			{ 
				if(this.account!=""&&this.password!="")
				{
				    db.collection("jiajiao_users").add({
				     account:this.account,
					 password:this.password
			        }).then(res=>{
						uni.showToast({
							title: '注册成功'
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:`/pages/index/index?account=${this.account}&password=${this.password}`
							})
						},800)
					})
				}
				else {
					uni.showToast({
						icon:'none',
						title:"请输入账号或密码"
					})
				}
			},
			judgePassword(e)
			{
				this.modal_status = e==this.password?false:true
			}
			
		}
	}
</script>

<style lang="scss">
	.box {
		background-color: white;
		width: 100%;
		height: 93vh;
		background-image: linear-gradient(to bottom right, rgb(114, 135, 254), rgb(130, 88, 186));
	}
</style>